<template>
  <div class="integral" v-if="designerInfo">
    <div class="top">
      <span class="level-name">至尊会员</span>
      <span class="num" @click="$router.push({path: '/my/integral/integral-detail'})">
        {{ designerInfo.score }}
        <span class="unit">积分</span>
      </span>
      <span class="my-task" @click="$router.push('/my/task')"></span>
    </div>
    <Scroll class="integral-scroll" :data="customList">
      <div class="content">
        <div class="add" @click="$router.push({path: '/my/integral/customer'})">
          <div class="add-title">添加客户即可获取积分</div>
          <div class="add-box">
            <img src="@/assets/images/tj.png" alt />
          </div>
        </div>
        <div v-for="(item, index) of customList" :key="index">
          <panel-custom
            @customEdit="$router.push({path: '/my/integral/my-customer', query: {id: item.id}})"
            :customInfo="item"
          />
        </div>
      </div>
    </Scroll>
    <transition name="slide">
      <router-view @success="hanldeSuccess"></router-view>
    </transition>
  </div>
</template>
<script>
import Scroll from '@/components/scroll/scroll'
import PanelCustom from '@/components/panel-custom'
import CostomList from '@/views/my/mixins/costom-list'
import IntegralScore from '@/views/my/mixins/edit-msg'
export default {
  components: {
    Scroll,
    PanelCustom
  },
  mixins: [CostomList, IntegralScore],
  methods: {
    hanldeSuccess () {
      this._getMyCustomList()
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
.integral {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  background: #fff;
  padding: 0 0 0 0.36rem;
  box-sizing: border-box;
  touch-action: none;
  .integral-scroll {
    position: absolute;
    left: 0.36rem;
    top: 2.2rem;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }
  .top {
    width: 100%;
    padding: 0.7rem 0;
    display: flex;
    align-items: center;
    line-height: 0.64rem;
    border-bottom: 1px solid #000400;
    position: relative;
    .level-name {
      font-size: 0.36rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(4, 0, 0, 1);
      padding-right: 0.48rem;
      border-right: 1px solid #e6e7e8;
    }
    .num {
      font-size: 0.6rem;
      font-family: Abel;
      font-weight: 400;
      color: rgba(4, 0, 0, 1);
      padding-left: 0.57rem;
      .unit {
        font-size: 0.22rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(0, 4, 0, 1);
        line-height: 0.22rem;
      }
    }
    .my-task {
      display: inline-block;
      width: 0.39rem;
      height: 0.38rem;
      background: url("../../assets/images/积分详情.png") no-repeat;
      background-size: cover;
      @include vCenter();
      right: 0.36rem;
    }
  }
  .content {
    width: 100%;
    padding-right: 0.36rem;
    box-sizing: border-box;
    .add {
      .add-title {
        padding-top: 0.65rem;
        padding-bottom: 0.42rem;
        font-size: 0.36rem;
        line-height: 0.36rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(4, 0, 0, 1);
      }
      .add-box {
        width: 100%;
        height: 1.01rem;
        border: 1px dashed rgba(0, 4, 0, 1);
        box-sizing: border-box;
        position: relative;
        img {
          width: 0.5rem;
          height: 0.5rem;
          @include center();
        }
      }
    }
    .item-edit {
      width: 100%;
      padding-top: 0.62rem;
      padding-bottom: 0.31rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 0.33rem;
      box-sizing: border-box;
      border-bottom: 1px solid rgba(0, 4, 0, 0.3);
      &:last-of-type {
        border-bottom: none;
      }
      .left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .name {
          font-size: 0.28rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(0, 4, 0, 1);
        }
        .phone {
          font-size: 0.22rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          margin-top: 0.25rem;
        }
      }
      .right {
        font-size: 0;
        display: flex;
        align-items: center;
        i {
          display: inline-block;
          width: 0.32rem;
          height: 0.32rem;
          vertical-align: middle;
          background: url("../../assets/images/icon_bjzl.png") no-repeat;
          background-size: cover;
          margin-right: 0.16rem;
        }
        span {
          font-size: 0.26rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(0, 4, 0, 1);
        }
      }
    }
  }
}
@include slideEnter();
</style>
